<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<script defer src="./js/index.js"></script>

	<!-- 信息展示区 -->
	<div class="info-wrap clearfix">
		<div class="info-item info-date">W1 D1</div>
		<div class="info-item info-money">100</div>
	</div>

	<!-- 厨师区 -->
	<div class="chef-area">
		<div class="chef">
			<div class="chef-item">
				<div class="chef-avatar chef-finished">
					<img src="./img/figure_chef.png" alt="">
					<img class="chef-serve" src="./img/icon_serve.png" alt="">
					<div class="chef-dish dish-finished">红烧HEAD</div>
				</div>
			</div>
		</div>
		<div class="chef">
			<div class="chef-item">
				<div class="chef-avatar chef-cooking">
					<img src="./img/figure_chef.png" alt="">
					<div class="chef-dish dish-cooking">红烧HEAD</div>
				</div>
			</div>
		</div>
		<div class="chef">
			<div class="chef-item">
				<div class="chef-avatar chef-free">
					<img src="./img/figure_chef.png" alt="">
				</div>
			</div>
		</div>
		<div class="chef">
			<div class="chef-item">
			<div class="chef-avatar chef-empty">
				<img src="./img/figure_chef.png" alt="">
				<div class="plus">
					<div class="plus-item plus-r"></div>
					<div class="plus-item plus-c"></div>
				</div>
			</div>
		</div>
		</div>
	</div>

	<!-- 顾客区 -->
	<div class="customer-area">
		<div class="customer">
			<div class="customer-item">
				<div class="customer-avatar">
<!--					<img class="customer-figure" src="./img/figure_customer_5.png" alt="">-->
<!--					<div class="customer-dishes">-->
<!--						<div class="customer-dish-item dish-miss">酥炸Echarts</div>-->
<!--						<div class="customer-dish-item dish-miss">鲜榨flex</div>-->
<!--					</div>-->
<!--					<img class="customer-icon customer-heart" src="./img/icon_heart.png" alt="">-->
				</div>
			</div>
		</div>
		<div class="customer">
			<div class="customer-item">
				<div class="customer-avatar">
<!--					<img class="customer-figure" src="./img/figure_customer_5.png" alt="">-->
<!--					<div class="customer-dishes">-->
<!--						<div class="customer-dish-item dish-finished">酥炸Echarts</div>-->
<!--						<div class="customer-dish-item dish-finished">鲜榨flex</div>-->
<!--					</div>-->
<!--					<img class="customer-icon customer-money" src="./img/icon_money.png" alt="">-->
				</div>
			</div>
		</div>
		<div class="customer">
			<div class="customer">
				<div class="customer-item">
<!--					<div class="customer-avatar">-->
<!--						<img class="customer-figure" src="./img/figure_customer_5.png" alt="">-->
<!--						<div class="customer-dishes">-->
<!--							<div class="customer-dish-item dish-wait">-->
<!--								酥炸Echarts-->
<!--								<div class="dish-serve"><img src="./img/icon_serve.png" alt=""></div>-->
<!--							</div>-->
<!--							<div class="customer-dish-item dish-wait">-->
<!--								鲜榨flex-->
<!--								<div class="dish-serve"><img src="./img/icon_serve.png" alt=""></div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>
		<div class="customer">
			<div class="customer">
				<div class="customer-item">
<!--					<div class="customer-avatar">-->
<!--						<img class="customer-figure" src="./img/figure_customer_5.png" alt="">-->
<!--						<div class="customer-dishes">-->
<!--							<div class="customer-dish-item dish-eat">-->
<!--								酥炸Echarts-->
<!--								<div class="dish-serve"><img src="./img/icon_serve.png" alt=""></div>-->
<!--							</div>-->
<!--							<div class="customer-dish-item dish-eat">鲜榨flex</div>-->
<!--						</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>

		<!-- 顾客等位区 -->
		<div class="wait-area">
<!--			<div class="wait-item">-->
<!--				<div class="wait-avatar">-->
<!--					<img src="./img/figure_customer_1.png" alt="">-->
<!--				</div>-->
<!--				<div class="wait-process">等位中</div>-->
<!--			</div>-->
		</div>
	</div>


	<!-- 遮罩 -->
	<div class="mask"></div>

	<!-- 菜单 -->
	<div class="tip-item tip-menu">
		<!-- 头部信息 -->
		<div class="menu-header">
<!--			<img src="./img/figure_customer_3.png" alt="">-->
<!--			<h3>QIAN正在点菜，已点100元的菜</h3>-->
		</div>
		<!-- 菜单主体 -->
		<div>
			<form id="menu_form">
				<h3>凉菜（二选一，可不点）</h3>
				<div class="menu_item">
					<div><input type="checkbox" value="6" name="menu" /><span>凉拌SAN</span></div>
					<div>···························<span>￥6</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="4" name="menu" /><span>冷切DOM</span></div>
					<div>···························<span>￥4</span></div>
				</div>
				<h3>主菜（五选一，必点）</h3>
				<div class="menu_item">
					<div><input type="checkbox" value="12" name="menu" /><span>UL炖LI</span></div>
					<div>···························<span>￥12</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="15" name="menu" /><span>红烧HEAD</span></div>
					<div>···························<span>￥15</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="18" name="menu" /><span>酥炸ECharts</span></div>
					<div>···························<span>￥18</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="16" name="menu" /><span>炙烤CSS</span></div>
					<div>···························<span>￥16</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="12" name="menu" /><span>清蒸DIV</span></div>
					<div>···························<span>￥12</span></div>
				</div>
				<h3>饮品（二选一，可不点）</h3>
				<div class="menu_item">
					<div><input type="checkbox" value="5" name="menu" /><span>鲜榨flex</span></div>
					<div>···························<span>￥5</span></div>
				</div>
				<div class="menu_item">
					<div><input type="checkbox" value="6" name="menu" /><span>小程序奶茶</span></div>
					<div>···························<span>￥6</span></div>
				</div>
			</form>
		</div>
		<!-- 底部选择框 -->
		<div class="tip-btns">
			<button class="tip-menu-confirm">点好了, 快上菜</button>
			<button class="tip-menu-abandon">不吃了</button>
		</div>
	</div>

	<!-- 欢迎界面 -->
	<div class="tip-item tip-welcome">
		<!-- 标题 -->
		<h2 style="font-weight: normal;text-align: center;margin-bottom: 0.3rem">WebMOOC餐厅开业啦!</h2>
		<!-- 内容 -->
		<p>WebMOOC餐厅开业即将开业，请认真经营你的餐厅吧，经营餐厅需要做好下面几件事情!加油！</p>
		<p class="task">
			<span>招聘厨师</span>
			<span>迎接客人</span>
			<span>烹饪美食</span>
		</p>
		<!-- 底部选择框 -->
		<div class="tip-btns">
			<button class="tip-welcome-confirm">开始经营吧</button>
		</div>
	</div>

	<!-- 招聘厨师 -->
	<div class="tip-item tip-hire">
		<!-- 标题 -->
		<h2 style="font-weight: normal;text-align: center;margin-bottom: 0.3rem">招聘新厨师</h2>
		<!-- 招聘信息提示-->
		<p>
			招聘一名新厨师可以帮你更快地为顾客烹饪菜肴,增加餐厅收入,你最多可以拥有六名厨师. <br>
			但每个厨师每周需要你支付￥100 <br>
			请问你确认招聘一名厨师吗?
			<br>
			<br>
		</p>
		<!-- 底部选择框 -->
		<div class="tip-btns">
			<button class="tip-hire-confirm">是的,确认招聘</button>
			<button class="tip-hire-abandon">先不了</button>
		</div>
	</div>

	<!-- 解雇厨师 -->
	<div class="tip-item tip-fire">
		<!-- 标题 -->
		<h2 style="font-weight: normal;text-align: center;margin-bottom: 0.3rem">解雇厨师</h2>
		<!-- 解雇信息提示 -->
		<p>
			解雇当前闲置的厨师可以帮你节省成本。 <br>
			解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。<br>
			解雇当前厨师结算工资及解约金需要付出￥140
			<br>
			<br>
		</p>
		<!-- 底部选择框 -->
		<div class="tip-btns">
			<button class="tip-fire-confirm">是的,确认解雇</button>
			<button class="tip-fire-abandon">先不了</button>
		</div>
	</div>

</body>
</html>